<template>
  <div class="base-content">
    <div class="basic-info">
      <!--操作栏-->
      <div class="base-content-operate">
        <el-button
          v-rights="'BatchCollect'"
          icon="el-icon-plus"
          type="primary"
          @click="batchCollect"
          >批量领取</el-button
        >
        <el-button
          v-rights="'BatchScrap'"
          icon="el-icon-plus"
          type="danger"
          @click="batchScrap"
          >批量报废</el-button
        >
      </div>

      <el-main class="roller_main">
        <el-table
          ref="table"
          v-loading="tableLoad"
          class="filter unsetborder"
          :class="{ 'show-filter': showFilterRow }"
          height="calc(100%)"
          style="width: 100%"
          :data="tableData"
          highlight-current-row
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55">
            <el-table-column type="selection"></el-table-column>
          </el-table-column>
          <el-table-column align="center" width="50">
            <template #header>
              <div class="filter-icon" title="筛选">
                <SvgIcon
                  class-name="filter"
                  icon-class="filter"
                  @click="filterIconClick"
                />
              </div>
            </template>
            <el-table-column width="50"></el-table-column>
          </el-table-column>
          <el-table-column label="样品编号">
            <el-table-column prop="sampleNum">
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="filterForm.sampleNum"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
              <template slot-scope="scope">
                <el-link type="primary" @click="toView(scope.row)">
                  {{ scope.row.sampleNum }}</el-link
                >
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="样品名称">
            <el-table-column prop="sampleName">
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="filterForm.sampleName"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="样品类别">
            <el-table-column prop="sampleCategoryName">
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="filterForm.sampleCategoryName"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="委托单号">
            <el-table-column prop="orderNum">
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="filterForm.orderNum"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="存储位置">
            <el-table-column prop="storageLocation">
              <template #header>
                <el-input
                  v-if="showFilterRow"
                  v-model="filterForm.storageLocation"
                  @keyup.enter.native="getList"
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="接收时间">
            <el-table-column prop="receivingDate" width="150">
              <template #header>
                <el-date-picker
                  v-model="filterForm.receivingDateList"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  align="right"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </template>
              <template slot-scope="scope">
                <span>{{ formatTime(scope.row.receivingDate) }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="报废日期">
            <el-table-column prop="estimateScrapTime" width="150">
              <template #header>
                <el-date-picker
                  v-model="filterForm.estimateScrapTimeList"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  align="right"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </template>
              <template slot-scope="scope">
                <span>{{ formatTime(scope.row.estimateScrapTime) }}</span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="操作" width="180">
            <el-table-column width="180">
              <template #header>
                <div v-if="showFilterRow" class="search-operate">
                  <el-link type="primary" @click="getList">搜索</el-link>
                  <el-link @click="cancelForm">清空</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- <LodopHint :drawer.sync="drawer" /> -->
      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pagination.pageIndex"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <SampleScrapEdit
      v-if="dialogFormVisible"
      :dialog-form-visible.sync="dialogFormVisible"
      :row-data.sync="rowData"
      @closeSampleScrapDialog="closeSampleScrapDialog"
    />
    <SampleReservedSampleReceiveEdit
      v-if="dialogFormVisibleSampleReserved"
      :dialog-form-visible.sync="dialogFormVisibleSampleReserved"
      :row-data.sync="rowData"
      @closeSampleReceivingDialog="closeSampleReceivingDialog"
    />
    <SampleDetailsDialog
      v-if="dialogFormDetailsVisible"
      ref="SampleDetailsDialog"
      :dialog-form-visible.sync="dialogFormDetailsVisible"
      :edit-id.sync="sampleInfoId"
    />
  </div>
</template>
<script>
import { getList } from "../../../api/SampleManage/SampleDispose";
import { formatTime } from "../../../utils/time";
import SampleDetailsDialog from "../../SampleManage/SampleManageList/SampleDetailsDialog.vue";
import SampleScrapEdit from "./SampleScrapEdit.vue";
import SampleReservedSampleReceiveEdit from "./SampleReservedSampleReceiveEdit.vue";
export default {
  name: "SampleDisposeList",
  components: {
    SampleScrapEdit,
    SampleReservedSampleReceiveEdit,
    SampleDetailsDialog,
  },
  data() {
    return {
      formatTime,
      tableLoad: false,
      showFilterRow: false,
      dialogFormVisible: false,
      dialogFormDetailsVisible: false,
      dialogFormVisibleSampleReserved: false,
      rowData: [],
      tableData: [],
      tableDatas: [],
      sampleInfoId: "",
      filterForm: {
        sampleNum: "",
        sampleName: "",
        sampleCategoryName: "",
        orderNum: "",
        storageLocation: "",
        receivingDateList: [],
        receivingDateStart: null,
        receivingDateEnd: null,
        estimateScrapTimeList: [],
        estimateScrapTimeStart: null,
        estimateScrapTimeEnd: null,
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.estimateScrapTime < formatTime()) {
        return "danger-row";
      }
      return "";
    },
    closeSampleScrapDialog() {
      this.getList();
    },
    closeSampleReceivingDialog() {
      this.getList();
    },
    // 批量领取
    batchCollect() {
      if (this.tableDatas === null || this.tableDatas.length === 0) {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
        return false;
      }
      this.rowData = this.tableDatas;
      this.dialogFormVisibleSampleReserved = true;
    },
    // 批量报废
    batchScrap() {
      if (this.tableDatas === null || this.tableDatas.length === 0) {
        this.$message({
          message: "请选择数据",
          type: "warning",
        });
        return false;
      }
      this.rowData = this.tableDatas;
      this.dialogFormVisible = true;
    },
    changePage(page) {
      this.pagination.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    // 多选
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    toView(row) {
      this.sampleInfoId = row.sysBusinessSampleInfoId;
      this.dialogFormDetailsVisible = true;
    },
    // 查询
    getList(flag) {
      this.filterForm.estimateScrapTimeStart = null;
      this.filterForm.estimateScrapTimeEnd = null;
      this.filterForm.receivingDateStart = null;
      this.filterForm.receivingDateEnd = null;

      if (
        this.filterForm.receivingDateList !== null &&
        this.filterForm.receivingDateList.length !== 0
      ) {
        this.filterForm.receivingDateStart =
          this.filterForm.receivingDateList[0] + " 00:00:00";
        this.filterForm.receivingDateEnd =
          this.filterForm.receivingDateList[1] + " 23:59:59";
      }

      if (
        this.filterForm.estimateScrapTimeList !== null &&
        this.filterForm.estimateScrapTimeList.length !== 0
      ) {
        this.filterForm.estimateScrapTimeStart =
          this.filterForm.estimateScrapTimeList[0] + " 00:00:00";
        this.filterForm.estimateScrapTimeEnd =
          this.filterForm.estimateScrapTimeList[1] + " 23:59:59";
      }

      if (flag) {
        this.pagination.pageIndex = 1;
      }
      getList({ ...this.filterForm, ...this.pagination }).then((res) => {
        this.tableData = res.data.dataList;
        this.total = res.data.total;
      });
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    // 清空
    cancelForm() {
      this.filterForm.receivingDateList = [];
      this.filterForm.estimateScrapTimeList = [];
      this.filterForm = this.$options.data().filterForm;
      this.getList();
    },
  },
};
</script>
  <style>
.el-table .danger-row {
  background: #fbc4c4;
}
</style>
